/*
 * @Description: 全宗表格组件
 * @Author: Rfan
 * @Date: 2022-01-07 15:20:55
 * @LastEditTime: 2022-03-03 11:27:32
 */

import { Empty, Tabs } from 'antd';
import classNames from 'classnames/bind';
import { useFondContext } from '../contexts/FondContext';
import FondPane from './FondPane';

import styles from '../styles/list.module.scss';

const cx = classNames.bind(styles);

const { TabPane } = Tabs;

const List = () => {
  const { list, selectFondId, setSelectFond } = useFondContext();

  const handleTabChange = (key: string): void => {
    setSelectFond(parseInt(key, 10));
  };

  return (
    <div className={cx('fond-container')}>
      {list && list.length > 0 ? (
        <Tabs tabPosition="left" activeKey={selectFondId + ''} onChange={handleTabChange}>
          {list.map((fond: any) => (
            <TabPane tab={fond.fondName} key={fond.id}>
              <FondPane title={fond.fondName} data={fond} />
            </TabPane>
          ))}
        </Tabs>
      ) : (
        <Empty className={cx('empty-fond')} description="目前此单位下还没有全宗哦" />
      )}
    </div>
  );
};

export default List;
